<template>
  <div>
    <Card class="search-condition">
      <Row>
        <span>计算时间：</span>
        <DatePicker type="date" v-model="pageModel.startTime" placeholder="请选择" style="width: 120px;"></DatePicker>
        <span class="m-r-sm">-</span>
        <DatePicker type="date" v-model="pageModel.endTime" placeholder="请选择" style="width: 120px;"></DatePicker>
        <span>操作者：</span>
        <Input v-model="pageModel.handlers" placeholder="请输入" clearable style="width: 120px;" />
        <span>计算规则：</span>
        <dict code='JSGZ' model="pageModel.rule" :value="pageModel.rule" @click="getVal" @data="getData" style="width: 220px;"></dict>
        <span>计算类型：</span>
        <dict code='ZGX_JSLX' model="pageModel.type" :value="pageModel.type" @click="getVal"></dict>
        <Button @click="fetchListStart" class="m-l-sm" type="primary" icon="md-search">筛选</Button>
        <Button @click="reset" class="m-l-sm" icon="md-sync">重置</Button>
      </Row>
    </Card>
    <Row class="m-b-sm m-t-sm">
      <Button to="calculation/add-start" type="primary" icon="md-add">新增计算</Button>
    </Row>
    <Card>
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp>
      </Row>
    </Card>

  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/calculation";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan
  },
  data() {
    return {
      loading: true,
      total: 0,
      rules: [],
      pageModel: {
        startTime: null,
        endTime: null,
        handlers: null,
        rule: null,
        type: null
      },
      page: {
        pageSize: this.$config.PAGE_SIZE,
        pageNo: 1
      },
      tableColumns: [
        {
          title: "序号",
          width: 80,
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              this.page.pageSize * (this.page.pageNo - 1) + params.index + 1
            );
          }
        },
        {
          title: "计算时间",
          key: "countTime",
          align: "left",
          render: (h, params) => {
            return h(
              "span",
              params.row.countTime == null
                ? ""
                : this.$moment(params.row.countTime).format(
                    "YYYY-MM-DD HH:mm:ss"
                  )
            );
          }
        },
        {
          title: "计算规则",
          key: "kindRule",
          align: "left",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let row = self.rules.find(x => x.ruleId === params.row.kindRule);
            let title = row == null ? params.row.kindRule : row.ruleName;
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "选手数量",
          key: "athleteNum",
          align: "left"
        },
        {
          title: "计算类型",
          key: "countType",
          align: "left",
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_JSLX",
                value: params.row.countType
              }
            });
          }
        },
        {
          title: "操作者",
          key: "handlers"
        },
        {
          title: "操作",
          key: "action",
          width: 220,
          align: "left",
          render: (h, params) => {
            let self = this;
            let title = "您确定将这条计算结果展示在用户端？";
            if (params.row.status === "1") {
              title = "您确定将这条计算结果取消在用户端展示？";
            }
            return h("div", [
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title,
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      //发布
                      this.publish(
                        params.row.rankId,
                        Math.abs(params.row.status - 1),
                        params.row.kindRule
                      );
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px"
                      },
                      props: {
                        type: "primary",
                        size: "small",
                        placement: "top"
                      }
                    },
                    params.row.status === "1" ? "取消发布" : "发布"
                  )
                ]
              ),
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      self.$router.push({
                        path: `calculation/detailed/${params.row.rankId}`
                      });
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Poptip",
                {
                  props: {
                    confirm: true,
                    title: "您确定要删除这条数据吗?",
                    transfer: true
                  },
                  on: {
                    "on-ok": () => {
                      //删除数据
                      this.del(params.row.rankId);
                    }
                  }
                },
                [
                  h(
                    "Button",
                    {
                      style: {
                        marginRight: "5px"
                      },
                      props: {
                        size: "small",
                        placement: "top"
                      }
                    },
                    "删除"
                  )
                ]
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  mounted() {
    // this.fetchListStart();
  },
  methods: {
    // 获取字典数据源
    getData(res) {
      let self = this;
      // 初始化
      if (self.rules.length === 0) {
        self.rules = res.data;
        self.fetchListStart();
      }
    },
    // 获取字典数据
    getVal(expression) {
      let self = this;
      eval(expression);
    },
    // 获取数据
    fetchListStart() {
      this.page = { ...this.page, ...this.pageModel, pageNo: 1 };
      this.fetchList();
    },
    fetchList() {
      this.loading = true;
      api
        .queryList(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data.list || [];
          this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    reset() {
      let self = this;
      Object.keys(self.pageModel).forEach(x => {
        self.pageModel[x] = null;
      });
      this.fetchListStart();
    },
    // 发布
    publish(id, status, kindRule) {
      api.publish({ id, status, kindRule }).then(data => {
        this.fetchListStart();
      });
    },
    del(id) {
      let self = this;
      api.del([id]).then(flag => {
        if (!flag) {
          self.$Message.error("删除失败,请重试");
          return;
        }
        this.fetchList();
      });
    }
  }
};
</script>

<style scoped>
</style>
